<template>
	<div class="container">
		<Header />
		<div class="chart_container">
			<div class="chart_layout left_container">
				<div class="one">
					<Diagramcontainer :title="ljyye">
						<template slot="echarts">
							<!-- 直接在这个template里面写你的图表就可以了-->
<!--							<span style="color: #fff">累计营业额（万元）</span>-->
							<div class="box-one">
								<div class="box-two">5</div>
								<div class="box-two">4</div>
								<div class="box-two">6</div>
								<div class="box-two">2</div>
								<div class="box-two">8</div>
								<div class="box-two">1</div>
								<div class="box-two">7</div>
							</div>
						</template>
					</Diagramcontainer>
				</div>
				<div class="two">
					<Diagramcontainer :title="xxplzb">
						<template slot="echarts">
<!--							<span style="color: #fff">销售品类占比</span>-->
							<div id="pie" style="width:100%;height: 100%"></div>
						</template>
					</Diagramcontainer>
				</div>
				<div class="three">
					<Diagramcontainer :title="khzzqs">
						<template slot="echarts">
							<div id="increase" style="width: 100%;height: 100%"></div>
						</template>
					</Diagramcontainer>
				</div>
			</div>
			<div class="chart_layout midden_container">
				<div class="one">
					<Diagramcontainer :title="ljyyeqs">
						<template slot="echarts">
							<div id="line" style="width:100%;height: 100%"></div>
						</template>
					</Diagramcontainer>
				</div>
				<div class="two">
					<Diagramcontainer :title="xscggk">
						<template slot="echarts">
							<div id="survey" style="width:100%;height: 100%"></div>
						</template>
					</Diagramcontainer>
				</div>
			</div>
			<div class="chart_layout right_container">
				<div class="one">
					<Diagramcontainer :title="spssph">
						<template slot="echarts">
							<div style="width: 100%;height: 100%;overflow: auto">
								<div style="width: 100%;height: 50px;background-color: #110b2e;display: flex;justify-content: space-between;align-items: center">
									<span style="width: 33%;height: 100%;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 18px">商品名称</span>
									<span style="width: 33%;height: 100%;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 18px">商品编号</span>
									<span style="width: 33%;height: 100%;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 18px">销售额(万元)</span>
								</div>
								
								<div v-for="item in 20" :key="item" style="width: 100%;height: 30px;display: flex;justify-content: space-between;align-items: center">
									<span style="width: 33%;height: 100%;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 14px">DF567321</span>
									<span style="width: 33%;height: 100%;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 14px">xx牌男士卫衣</span>
									<span style="width: 33%;height: 100%;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 14px">350000.00</span>
								</div>
							</div>
						</template>
					</Diagramcontainer>
				</div>
				<div class="two">
					<Diagramcontainer :title="xxthplzb">
						<template slot="echarts">
							<div style="width:100%;height: 100%;display: flex;flex-direction: column;justify-content: space-around;align-items: center">
								<div style="width: 100%;display: flex;align-items: center;justify-content: space-around">
									<i>服饰 : &nbsp;</i>
									<el-progress style="width: 70%" :text-inside="true" text-color="#fff" color="#0272fc" :stroke-width="20" :percentage="37"></el-progress>
								</div>
								<div style="width: 100%;display: flex;align-items: center;justify-content: space-around">
									<i>箱包 : &nbsp;</i>
									<el-progress style="width: 70%" :text-inside="true" text-color="#fff" color="#0272fc" :stroke-width="20" :percentage="87"></el-progress>
								</div>
								<div style="width: 100%;display: flex;align-items: center;justify-content: space-around">
									<i>电器 : &nbsp;</i>
									<el-progress style="width: 70%" :text-inside="true" text-color="#fff" color="#0272fc" :stroke-width="20" :percentage="45"></el-progress>
								</div>
								<div style="width: 100%;display: flex;align-items: center;justify-content: space-around">
									<i>食品饮料 : &nbsp;</i>
									<el-progress style="width: 70%" :text-inside="true" text-color="#fff" color="#0272fc" :stroke-width="20" :percentage="9"></el-progress>
								</div>
								<div style="width: 100%;display: flex;align-items: center;justify-content: space-around">
									<i>日常用品 : &nbsp;</i>
									<el-progress style="width: 70%" :text-inside="true" text-color="#fff" color="#0272fc" :stroke-width="20" :percentage="5"></el-progress>
								</div>
							
							</div>
						</template>
					</Diagramcontainer>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
    import Header from "../components/Header";
    import Diagramcontainer from "../components/Diagramcontainer";
    import * as echarts from 'echarts'
    export default {
        name: "Visualization",
        components: {
            Header,
            Diagramcontainer,
        },
        data() {
            return {
                ljyye: "累计营业额（万元）",
                xxplzb: "销售品类占比",
                khzzqs: "客户增长趋势",
                ljyyeqs: "累计营业额趋势",
                xscggk: "销售/采购概况（万元）",
                spssph: "商品销售排行TOP10",
                xxthplzb: "销售退货品类占比",
            };
        },
		mounted() {
            this.initPie()
			this.initLine()
			this.initIncrease()
			this.initSurvey()
        },
        methods:{
            // 饼图
            initPie () {
                const option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: 'bottom',
                        textStyle:{
                            fontSize: 12,//字体大小
                            color: '#ffffff'//字体颜色
                        },
                    },
                    series: [
                        {
                            name: '销售品类占比',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: 19.54, name: '电器' },
                                { value: 17.79, name: '视频饮料' },
                                { value: 13.65, name: '箱包' },
                                { value: 25.12, name: '服饰' },
                                { value: 15.31, name: '日常用品' }
                            ],
                        }
                    ]
                }
                const myChart = echarts.init(document.getElementById('pie'))// 图标初始化
                myChart.setOption(option)// 渲染页面
                //  随着屏幕大小调节图表
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            },
			initLine(){
                const option = {
                    tooltip: {},
                    xAxis: {
                        data: ['1月', '2月', '3月', '4月', '5月', '6月']
                    },
                    yAxis: {
					},
                    series: [
                        {
                            type: 'line', // 类型为柱状图
                            data: [290, 450, 670, 930, 1050, 1150]
                        }
                    ]
                }
                const myChart = echarts.init(document.getElementById('line'))// 图标初始化
                myChart.setOption(option)// 渲染页面
                //  随着屏幕大小调节图表
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
			},
			initIncrease(){
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['一月', '二月', '三月', '四月', '五月', '六月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '客户增长量',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [960, 950, 960, 1010, 1020, 1050]
                        },
                        {
                            name: '客户总数',
                            type: 'line',
                            stack: 'Total',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [1080, 1050, 1070, 1120, 1125, 1160]
                        }
                    ]
                };
                
                const myChart = echarts.init(document.getElementById('increase'))// 图标初始化
                myChart.setOption(option)// 渲染页面
                //  随着屏幕大小调节图表
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
			},
			initSurvey(){
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        textStyle:{
                            fontSize: 12,//字体大小
                            color: '#ffffff'//字体颜色
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                show: false
                            },
                            data: ['一月', '二月', '三月', '四月', '五月']
                        }
                    ],
                    series: [
                        {
                            name: '销售',
                            type: 'bar',
                            stack: 'Total',
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [1000,1400,2300,1200,2800]
                        },
                        {
                            name: '采购',
                            type: 'bar',
                            stack: 'Total',
                            label: {
                                show: true,
                                position: 'left'
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [-1000,-1800, -2000, -1000,-2800]
                        }
                    ]
                };
                
                const myChart = echarts.init(document.getElementById('survey'))// 图标初始化
                myChart.setOption(option)// 渲染页面
                //  随着屏幕大小调节图表
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
			}
		}
    };
</script>

<style lang="less" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background-color: black;
	}
	.chart_container {
		height: calc(100% - 75px);
		display: flex;
		  .chart_layout {
			height: 100%;
			padding: 0.25rem;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			}
		  .left_container {
			width: 25%;
			  .one {
				height: 20%;
				.box-one{
					width: 100%;
					height: 100%;
					/*padding:10px 10px ;*/
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-around;
					.box-two{
						width: 30px;
						height: 100%;
						background: url("../assets/images/u53.png")no-repeat;
						background-size: cover;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 20px;
						font-weight: bold;
					}
				}
				}
			   .two {
				height: 65%;
				margin: 0.125rem 0;
				}
			    .three {
				height: 65%;
				}
			}
		  .midden_container {
			width: 50%;
			  .one {
				height: 60%;
				margin-bottom: 0.125rem;
				}
			    .two {
				height: 40%;
				}
			}
		  .right_container {
			width: 25%;
			    .one {
				height: 60%;
				margin-bottom: 0.125rem;
				}
			    .two {
				height: 40%;
				}
			}
	}
</style>
